﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script src="../Scripts/basejs.js"></script>
    <script src="../Scripts/GridTreejs.js"></script>
    <script src="../Scripts/json2.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../css/GridTree.css" rel="stylesheet" />
</head>
<body>
    <div id="div_ptb_box">
        <table class="table table-bordered">
            <thead>
                <tr fm-head>
                    <th width="5%">id</th>
                    <th width="40%">名称</th>
                    <th width="30%">图标</th>
                    <th width="25%">Id</th>
                </tr>
            </thead>
            <tbody fm-body>
                <tr>
                    <td>1</td>
                    <td fm-tree >{{Name}}</td>
                    <td>{{Icon}}</td>
                    <td>{{Id}}</td>
                </tr>
            </tbody>

        </table>
    </div>
    <input type="button" id="btnreload" value="reload" />

    <input type="button" id="btnrefresh" value="refresh" />

    <input type="button" id="btngetselected" value="getselected" />
    <div id="div_show">

    </div>
    
    <script>

        $(document).ready(function () {
            var data = [{ Id: 2, Name: "李思", Selected: true, Child: [{ Id: 21, Name: "张三", Child: null }, { Id: 22, Name: "李思", Selected: true, Child: [{ Id: 221, Name: "王五", Child: null }] }, { Id: 2200, Name: "李思", Selected: false, Child: [{ Id: 22100, Name: "王五", Child: null }] }, { Id: 3, Name: "王五", Child: null }] }];
            //必须引用json2.js
            var app = $("#div_ptb_box").GridTree({
                data: data,
                //url: "/group",//返回值格式{Data:[{...},{...}]}
                //child: "Cgroup",
                expand: true,
                treeModel: "checkbox",
                multiple:true,
                selected: function (data) {
                    $("#div_show").html(JSON.stringify(data));
                }
            });

            $("#btngetselected").click(function () {
                $("#div_show").html(JSON.stringify(app.getSelected()));
            });

            //app1.reload();
            $("#btnreload").click(function () {
                app.reload();//刷新整个grid
            });

            $("#btnrefresh").click(function () {
                app.refresh();//刷新当前grid
            });

        });



        function converage(obj) {
            return obj + "岁";
        }

        function convertime(obj) {
            return obj.substring(0, 10);
        }

        function converstr(obj) {
            return obj.substring(0, 30);
        }
    </script>
</body>

</html>
